<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 300px;
			background: red;
			position: absolute;
		}
	</style>

	<script type="text/javascript">
		//鼠标按下
		//鼠标抬起
		//鼠标移动
		window.onload=function(){

		   var oDiv=document.getElementById('div1');
           var disX=0;
           var disY=0;
           //alert(oDiv);
		   oDiv.onmousedown=function(ev){
             var oEvent = ev||event;
             //pos=getpos(oEvent);
             //鼠标的位置减去DIV的位置
             oDiv.style.background='blue';
             disX=oEvent.clientX-oDiv.offsetLeft;
             disY=oEvent.clientY-oDiv.offsetTop;
             console.log('按下：'+(disX+"-"+disY));
             
	           document.onmousemove=function(ev){
	           	 var oEvent = ev||event;
                 oDiv.style.background='yellow';
                 //oDiv.style.left='500px';
	             oDiv.style.left=oEvent.clientX-disX+'px';
	             oDiv.style.top =oEvent.clientY-disY+'px';
	             console.log('移动：'+(oEvent.clientX-disX)+"-"+(oEvent.clientY-disY))
	             //alert(pos.y-disY);
	           };

		       document.onmouseup=function(){
			    	document.onmousemove=null;
			    	document.onmouseup=null;
			   };
               

               return false;
		    };

		};
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>